<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar fixed>
      <template #left>
        <img src="@/assets/logo.png" alt="" width="120" height="30" />
      </template>
      <template #right>
        <van-button 
        round 
        color="#67c9f2" 
        icon="search" 
        type="primary"
        @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <!-- tap栏 -->
    <van-tabs v-model="active" @click="tablick">
      <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in articleList"
              :key="item.art_id"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(it, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image lazy-load :src="it" />
                  </van-grid-item>
                </van-grid>
                <br />
                <span>{{ item.aut_name }}</span
                >&nbsp;&nbsp; <span>{{ item.comm_cout }}</span
                >&nbsp;&nbsp;
                <span>{{ item.pubdate | fromNow }}</span>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//导入请求频道接口
import { getChannelList, getArticlesList } from './home.js'
//导入时间管理
import * as moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'home',
  data () {
    return {
      active: 0, //tads栏切换
      list: [], //列表数据
      loading: false, //上拉刷新 加载数据的动画
      finished: false, //是否加载完数据
      isLoading: false, //下拉刷新
      channelList: [], //   频道列表数据
      timestamp: null, //时间戳  用于请求下一页的数据
      articleList: [] //文章列表数组
    }
  },
  //加载更多事件
  async created () {
    //请求数据
    let res = await getChannelList()
    //绑定数据
    this.channelList = res.data.data.channels
  },

  methods: {
    //加载更多事件
    async onLoad () {
      //判断是不是第一页
      //没有就是第一页
      if (!this.timestamp) {
        //进来就是没有过
        this.timestamp = Date.now()
      }
      //发起请求
      let res = await getArticlesList({
        //传参
        channel_id: this.channelList[this.active].id,
        timestamp: this.timestamp
      })
      //console.log(res)
      //保存返回的时间戳,用于请求下一页
      this.timestamp = res.data.data.pre_timestamp
      //绑定数据
      this.articleList.push(...res.data.data.results)
      // 加载状态动画关闭 就代表完成加载数据
      this.loading = false
      // 数据全部加载完成
      //finished为true就不在触发onLoad事件 不在加载数据
      if (this.articleList.length >= 50) {
        this.finished = true
      }
    },
    // 下拉
    onRefresh () {
      //0.一旦下拉刷新，无条件的设置finished为false(保证刷新之后可以正常上拉加载更多)
      this.finished = false
      //.关闭下拉刷新动画（如果不写，上面的上拉刷新动画会一直转圈）
      this.isLoading = false
      //.先清空旧数据
      this.articleList = []
      this.timestamp = null
      //.设置上拉加载更多状态为true(开启底部加载中动画)
      this.loading = true
      //.重新请求数据
      this.onLoad()
    },

    tablick () {
      // console.log(this.active)
      this.finished = false
      //.先清空旧数据
      this.articleList = []
      this.timestamp = null
      //.设置上拉加载更多状态为true(开启底部加载中动画)
      this.loading = true
      //.重新请求数据
      this.onLoad()
    }
  },
  //过滤器
  filters: {
    fromNow (value) {
      //转成相对时间
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
//顶部
.van-nav-bar {
  z-index: 1000 !important;
  .van-button {
    height: 35px;
    width: 100px;

    .van-icon {
      color: #fff;
    }
  }
}

//tab栏布局
.van-tabs {
  .van-tabs__wrap {
    position: fixed;
    z-index: 10;
    top: 46px;
    width: 100%;
  }
  .van-tabs__content {
    margin-top: 90px;
  }
}
.van-list {
  margin-bottom: 50px;
}
</style>
